frontend/src/queries/cooperative/hero.ts (1)

4-4: Remove unnecessary empty line

Consider removing the extra empty line to maintain consistent spacing.

frontend/src/components/Dropdown/DropdownItemButton.tsx (2)

4-6: Fix typo in style variable name

The variable name contains a typo: dropwdownItemBaseStyle should be dropdownItemBaseStyle.

---

12-16: Consider adding prop validation

The interface looks good, but consider adding prop-types validation for runtime type checking, especially for required props.

frontend/src/components/Cooperative/ReportSection/index.tsx (2)

13-22: Consider simplifying the report type selection

The switch statement could be simplified using an object lookup pattern for better maintainability.

-  const getReports = (reportType: ReportType) => {
-    switch (reportType) {
-      case "annual":
-        return reportsData.annualReports;
-      case "risk":
-        return reportsData.riskReports;
-      default:
-        return reportsData.treasuryReports;
-    }
-  };
+  const reportTypeMap = {
+    annual: reportsData.annualReports,
+    risk: reportsData.riskReports,
+    treasury: reportsData.treasuryReports,
+  };
+  const getReports = (reportType: ReportType) => 
+    reportTypeMap[reportType] ?? reportTypeMap.treasury;

---

12-34: Consider adding error boundary and prop validation

The component could benefit from:

1. An error boundary to handle potential data issues
2. Explicit prop spreading instead of using the spread operator to avoid prop pollution
3. Prop-types validation for runtime type checking

frontend/src/components/Cooperative/MemberSection/LearnMore.tsx (2)

16-16: Replace hardcoded z-index values with CSS variables

Using hardcoded z-index values (z-[1]) makes it difficult to maintain stacking context. Consider using CSS variables for better maintainability.

-      <h2 className="text-primary-text text-xl mb-8 z-[1]">{title}</h2>
+      <h2 className="text-primary-text text-xl mb-8 z-content">{title}</h2>

Also applies to: 21-21, 24-24

---

28-30: Use background.name for Image alt text

The alt text is hardcoded. Consider using background.name from props for better accessibility.

-        alt="Learn more Image Background"
+        alt={background.name}

frontend/src/components/Cooperative/MemberSection/index.tsx (3)

5-7: Remove Hungarian notation from interface name

The I prefix (Hungarian notation) is not recommended in modern TypeScript. Consider renaming to just MemberSectionProps.

-interface IMemberSection {
+interface MemberSectionProps {
   memberData: CooperativePageMemberQueryType["cooperativePageMemberSection"];
 }

---

16-16: Avoid spreading props blindly

Spreading props ({...memberData.learnMoreSection}) can pass unwanted props. Consider explicit prop passing for better type safety and maintainability.

-      <LearnMore {...memberData.learnMoreSection} />
+      <LearnMore
+        title={memberData.learnMoreSection.title}
+        button={memberData.learnMoreSection.button}
+        background={memberData.learnMoreSection.background}
+      />

---

23-23: Avoid className overrides with !important

The !gap-2 className uses Tailwind's important modifier. Consider adjusting the ExternalLink component's base styles instead.

frontend/src/pages/community.tsx (1)

Line range hint 31-44: Remove redundant property name in getStaticProps

The heroData: heroData assignment is redundant due to object property shorthand in modern JavaScript.

   return {
     props: {
       navbarData,
       footerData,
-      heroData: heroData,
+      heroData,
     },
   };

frontend/src/queries/cooperative/report-section.ts (3)

34-49: Extract common fields into a base type

The report types (annualReports, riskReports, treasuryReports) share common fields. Consider extracting them into a base type.

type BaseReport = {
  url: string;
  year: number;
};

type MonthlyReport = BaseReport & {
  month: string;
};

export type CooperativePageReportQueryType = {
  cooperativePageReportSection: {
    reports: Report[];
  };
  annualReports: BaseReport[];
  riskReports: MonthlyReport[];
  treasuryReports: MonthlyReport[];
};

---

3-15: Add JSDoc comments for exported types

The exported types lack documentation. Consider adding JSDoc comments to improve code maintainability.

/** Type of report that can be displayed */
export type ReportType = "annual" | "risk" | "treasury";

/** Structure of a report item with its metadata */
export type Report = {
  title: string;
  // ... rest of the type
};

---

17-51: Consider breaking down the GraphQL query

The query could be split into smaller fragments for better reusability and maintainability.

const reportFragment = gql`
  fragment ReportFields on Report {
    title
    subtitle
    reportType
    yearDropdownLabel
    monthDropdownLabel
    downloadButtonText
    icon {
      name
      url
    }
  }
`;

export const cooperativePageReportQuery = gql`
  {
    cooperativePageReportSection {
      reports {
        ...ReportFields
      }
    }
    # ... rest of the query
  }
  ${reportFragment}
`;

frontend/src/components/Cooperative/ReportSection/ReportCard.tsx (1)

9-17: Consider adding type constraints for the month field.

The month field in Reports type could benefit from being more specific about the expected format (e.g., full month name, abbreviated month, or numeric).

 export type Reports = {
   url: string;
-  month?: string;
+  month?: 'January' | 'February' | 'March' | 'April' | 'May' | 'June' | 
+          'July' | 'August' | 'September' | 'October' | 'November' | 'December';
   year: number;
 }[];

frontend/src/components/Cooperative/hero.tsx (2)

23-37: Enhance button accessibility for external links.

When opening links in new tabs, it's important to inform screen reader users.

 {buttons.map((button) => (
   <Link
     key={button.text}
     href={button.link.url}
     target="_blank"
     rel="noopener noreferrer"
+    aria-label={`${button.text} (opens in new tab)`}
   >
     <Button
       variant="secondary"
       className=" hover:!bg-primary-blue hover:!border-primary-blue hover:!text-background-2"
     >
       <span>{button.text}</span>
     </Button>
   </Link>
 ))}

---

45-50: Optimize hero background image loading.

Consider adding priority and quality props to optimize the hero image loading performance.

 <Image
   src={background.url}
   alt="Hero Image Background"
   fill
+  priority
+  quality={90}
   className="absolute top-0 left-0 h-full z-[-1] object-cover"
 />

frontend/src/components/Dropdown/index.tsx (1)

36-49: Improve event handler type safety.

Replace any with proper MouseEvent type for better type safety.

 useEffect(() => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleClickOutside = (event: any) => {
+  const handleClickOutside = (event: MouseEvent) => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };

   document.addEventListener("mousedown", handleClickOutside);
   return () => {
     document.removeEventListener("mousedown", handleClickOutside);
   };
 }, []);

frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx (3)

18-19: Consider initializing state with meaningful default values

The undefined initial states could lead to uncontrolled components initially. Consider:

1. Initializing with the most recent year from reports
2. Setting the first available month for that year

-  const [year, setYear] = useState<number>();
-  const [month, setMonth] = useState<string>();
+  const [year, setYear] = useState<number>(() => 
+    Math.max(...Array.from(reports.map(r => r.year)))
+  );
+  const [month, setMonth] = useState<string>(() => {
+    const reportsForYear = reports.filter(r => r.year === year);
+    return reportsForYear[0]?.month || '';
+  });

---

52-61: Consider moving monthOrder near its usage

The month sorting logic relies on monthOrder array defined at the bottom of the file. Consider:

1. Moving monthOrder declaration above its usage
2. Making it a constant using as const for better type safety

+ const monthOrder = [
+   "January", "February", "March", "April", "May", "June",
+   "July", "August", "September", "October", "November", "December"
+ ] as const;
+
  const months = useMemo(
    () =>
      Array.from(new Set(monthsSet))
        .sort((a, b) => monthOrder.indexOf(a) - monthOrder.indexOf(b))
        .map((month) => ({
          key: month,
          value: month,
        })),
    [monthsSet]
  );

---

101-115: Consider using named exports

For better maintainability and import/export tracking:

- export default DropdownContainer;
+ export { DropdownContainer };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro